<!-- 添加试题-实验题 -->
<template>
  <div id="add-experimental" :class="{'isCreativeCourse':isCreativeCourse}">
    <!-- 编辑实验环境悬浮 -->
    <div @click="addQuestionShowDialog" class="edit-experimental"></div>
    <!-- 编辑实验环境弹出框 -->
    <el-dialog :modal-append-to-body="false" class="dialog-edit-experimental" title="添加实验环境配置" :visible.sync="dialogEditExperimental" width="60%">
      <el-form ref="editExperimental" :model="editExperimental" label-width="80px">
        <el-form-item label="类型：">
          <el-radio v-model="editExperimental.radio" label="1">单节点</el-radio>
          <el-radio v-model="editExperimental.radio" label="2">集群</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogCheckSubmit = false">保存</el-button>
        <br>
        <br>
      </span>
    </el-dialog>
    <!-- 查重设置弹出框 -->
    <el-dialog :close-on-click-modal="false" class="dialog-check" title="查重设置" :visible.sync="dialogCheck" width="30%">
      <p class="check-tishi">
        <i class="el-icon-warning"></i>批量控制该考试所有学生的实验报告重复率检查比率
      </p>
      <p class="dialog-b">实验报告代码查重校验
        <el-switch v-model="dialogCheckSwitch"></el-switch>
      </p>
      <p>实验报告相似度高于
        <el-select v-model="value" placeholder="请选择">
          <el-option v-for="item in dialogCheckOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogCheckSubmit = false">保存</el-button>
        <br>
        <br>
      </span>
    </el-dialog>

    <div class="courses-nav jx-content">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="题目类型 :">
          <el-select :disabled="disabledQuestionType" v-model="questionTypeMessage" placeholder="请选择" @change="getTopicModel">
            <el-option v-for="(item,index) in questionTypeList" :key="index" :label="item.message" :value="item.type"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="试题章节 :">
          <el-select :clearable="false" v-model="addForm.chapterId" placeholder="请选择" @change="getchapterModel">
            <el-option v-for="(item,index) in chapterList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="jx-content">
      <div class="answer-editor">
        <h2 class="jx-title">试题题目</h2>
        <mavonEditor ref="question"></mavonEditor>
      </div>
      <div class="answer-editor">
        <h2 class="jx-title">参考答案</h2>
        <!-- {{ addForm.answer[0].content }} -->
        <mavonEditor ref="answer"></mavonEditor>
        <!-- <el-input v-model="addForm.answer[0].content" type="textarea" :rows="5"></el-input> -->
      </div>
      <!-- <div class="question-editor">
        <h2 class="jx-title">答案解析</h2>
        <mavonEditor ref="answer"></mavonEditor>
      </div> -->

      <div class="btn-group">
        <!-- <button v-if="!rowId" @click="addQuestion" class="button-style question-submit">保存</button> -->
        <button v-if="rowId" @click="toItemList" class="button-style question-submit">保存修改</button>
      </div>
    </div>

    <el-dialog :close-on-click-modal="false" class="dialog-distribution" title="分配镜像" :visible.sync="dialogDistributionFormVisible" label-width="100px" width="830px">
      <el-form :model="distributionform" ref="distributionform">
        <el-form-item class="is-required" label="实验类型：">
            <el-radio-group v-model="distributionform.experimentType" @change="experimentTypeChange">
                <el-radio :label="1">可视化实验</el-radio>
                <el-radio :label="2">NoteBook实验</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item class="is-required" label="配置类型：" v-if="distributionform.experimentType == 1">
            <el-radio-group v-model="distributionform.resource">
                <el-radio :label="1">单节点</el-radio>
                <el-radio :label="2">集群</el-radio>
            </el-radio-group>
        </el-form-item>
        <template v-if="distributionform.experimentType == 2">
            <el-form-item class="config-item">
                <div class="fl item-config">
                    <el-form-item
                        prop="distributedData.cpuValue"
                        :rules="{
                            required: true, message: '请选择CPU上限', trigger: 'blur'
                        }"
                        label="配置："
                        style=" float:left; width:210px;"
                        class="item-cpu">
                        <el-select v-model="distributionform.distributedData.cpuValue" value-key="value" placeholder="CPU上限">
                            <el-option
                            v-for="item in distributionform.distributedData.cpuOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        prop="distributedData.ramValue"
                        :rules="{
                            required: true, message: '请选择内存上限', trigger: 'blur'
                        }"
                        style="width:110px; float:left; margin-left:10px;">
                        <el-select v-model="distributionform.distributedData.ramValue" placeholder="内存上限">
                            <el-option
                            v-for="item in distributionform.distributedData.ramOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-form-item>
            <el-form-item class="is-required" label="镜像：">
                <el-cascader
                    :options="distributionform.options0"
                    v-model="distributionform.optionsValue0"
                    :show-all-levels="false"
                    @change="handleItemChange"
                ></el-cascader>
            </el-form-item>
        </template>
        <template v-if="distributionform.experimentType == 1">
            <div class="form-title">{{ distributionform.resource == 1 ? '伪分布' : '主节点'}}</div>
            <!-- 伪分布 -->
            <el-form-item class="config-item" v-if="distributionform.resource == 1">
            <div class="fl item-config">
                <el-form-item prop="distributedData.cpuValue" :rules="{
                                required: true, message: '请选择CPU上限', trigger: 'blur'
                            }" label="配置：" style=" float:left; width:210px;" class="item-cpu">
                <el-select v-model="distributionform.distributedData.cpuValue" value-key="value" placeholder="CPU上限">
                    <el-option v-for="item in distributionform.distributedData.cpuOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item prop="distributedData.ramValue" :rules="{
                                required: true, message: '请选择内存上限', trigger: 'blur'
                            }" style="width:110px; float:left; margin-left:10px;">
                <el-select v-model="distributionform.distributedData.ramValue" placeholder="内存上限">
                    <el-option v-for="item in distributionform.distributedData.ramOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
            </div>
            <!-- <el-form-item class="fl item-Gpu" label="GPU">
                <el-switch v-model="distributionform.distributedData.switchValue">
                </el-switch>
            </el-form-item> -->
            </el-form-item>
            <el-form-item class="is-required" label="镜像：" v-if="distributionform.resource == 1">
            <el-cascader :options="distributionform.options0" v-model="distributionform.optionsValue0" :show-all-levels="false" @change="handleItemChange"></el-cascader>
            </el-form-item>
            <!-- 伪分布end -->
            <!-- 主节点 -->
            <el-form-item class="config-item" v-if="distributionform.resource == 2">
            <div class="fl item-config">
                <el-form-item prop="nodeMianData.cpuValue" :rules="{
                                required: true, message: '请选择CPU上限', trigger: 'blur'
                            }" label="配置：" style=" float:left; width:210px;" class="item-cpu">
                <el-select v-model="distributionform.nodeMianData.cpuValue" value-key="value" placeholder="CPU上限">
                    <el-option v-for="item in distributionform.nodeMianData.cpuOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item prop="nodeMianData.ramValue" :rules="{
                                required: true, message: '请选择内存上限', trigger: 'blur'
                            }" style="width:110px; float:left; margin-left:10px;">
                <el-select v-model="distributionform.nodeMianData.ramValue" placeholder="内存上限">
                    <el-option v-for="item in distributionform.nodeMianData.ramOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
            </div>
            <!-- <el-form-item class="fl item-Gpu" label="GPU">
                <el-switch v-model="distributionform.nodeMianData.switchValue">
                </el-switch>
            </el-form-item> -->
            </el-form-item>
            <el-form-item class="is-required" label="镜像："v-if="distributionform.resource == 2">
                <el-cascader
                    :options="distributionform.options7"
                    v-model="distributionform.optionsValue7"
                    :show-all-levels="false"
                    @change="handleItemChange"
                ></el-cascader>
            </el-form-item>
            <!-- 伪分布end -->
            <div class="form-title" v-if="distributionform.resource == 2">从节点</div>
            <!-- 镜像配置 -->
            <el-form-item class="config-item" v-if="distributionform.resource == 2">
            <div class="fl item-config">
                <el-form-item prop="mirrorConfigData.cpuValue" :rules="{
                                required: true, message: '请选择CPU上限', trigger: 'blur'
                            }" label="配置：" style=" float:left; width:210px;" class="item-cpu">
                <el-select v-model="distributionform.mirrorConfigData.cpuValue" value-key="value" placeholder="CPU上限">
                    <el-option v-for="item in distributionform.mirrorConfigData.cpuOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item prop="mirrorConfigData.ramValue" :rules="{
                                required: true, message: '请选择内存上限', trigger: 'blur'
                            }" style="width:110px; float:left; margin-left:10px;">
                <el-select v-model="distributionform.mirrorConfigData.ramValue" placeholder="内存上限">
                    <el-option v-for="item in distributionform.mirrorConfigData.ramOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
            </div>
            <!-- <el-form-item class="fl item-Gpu" label="GPU">
                <el-switch v-model="distributionform.mirrorConfigData.switchValue">
                </el-switch>
            </el-form-item> -->
            </el-form-item>
            <!-- 镜像配置 -->
            <el-form-item v-if="distributionform.resource == 2" label="从节点数：">
            <div class="virtual-step">
                <ul>
                <!-- <li v-for="(item, index) in distributionform.virtualStepList" @click="AddClass(((index+1)*2))" :class="{ active:((index+1)*2) == distributionform.virtualStepCurrent, 'active-disabled': index != 0}">{{item.value}}</li> -->
                <li v-for="(item, index) in distributionform.virtualStepList" @click="AddClass(((index+1)))" :class="{ active:((index+1)) == distributionform.virtualStepCurrent}">{{item.value}}</li>
                </ul>
            </div>
            </el-form-item>
            <div class="item-node" v-if="distributionform.resource == 2">
            <el-form-item class="is-required" label="镜像1：" v-if="distributionform.virtualStepCurrent == 1 || distributionform.virtualStepCurrent == 2 ||distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                <el-cascader :options="distributionform.options1" v-model="distributionform.optionsValue1" :show-all-levels="false" @change="handleItemChange"></el-cascader>
            </el-form-item>
            <el-form-item class="is-required" label="镜像2：" v-if="distributionform.virtualStepCurrent == 2 ||distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                <el-cascader :options="distributionform.options2" v-model="distributionform.optionsValue2" :show-all-levels="false" @change="handleItemChange"></el-cascader>
            </el-form-item>
            <el-form-item class="is-required" label="镜像3：" v-if="distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                <el-cascader :options="distributionform.options3" v-model="distributionform.optionsValue3" :show-all-levels="false" @change="handleItemChange"></el-cascader>
            </el-form-item>
            <el-form-item class="is-required" label="镜像4：" v-if="distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                <el-cascader :options="distributionform.options4" v-model="distributionform.optionsValue4" :show-all-levels="false" @change="handleItemChange"></el-cascader>
            </el-form-item>
            <el-form-item class="is-required" label="镜像5：" v-if="distributionform.virtualStepCurrent == 6">
                <el-cascader :options="distributionform.options5" v-model="distributionform.optionsValue5" :show-all-levels="false" @change="handleItemChange"></el-cascader>
            </el-form-item>
            <el-form-item class="is-required" label="镜像6：" v-if="distributionform.virtualStepCurrent == 6">
                <el-cascader :options="distributionform.options6" v-model="distributionform.optionsValue6" :show-all-levels="false" @change="handleItemChange"></el-cascader>
            </el-form-item>
            </div>
        </template>
      </el-form>
      <div class="distribution-item" v-if="distributionform.distributionData">
        <div class="jx-course-box">
          <img :src="distributionform.distributionData.iconUrl" />
          <span v-text="distributionform.distributionData.imageName"></span>
        </div>
        <div class="jx-course-text" v-text="distributionform.distributionData.description"></div>
        <div class="jx-course-icon" v-if="distributionform.distributionData.gpu">
            <img src="./../../../assets/images/gpu_icon.png" />
        </div>
        <div class="jx-course-icon" v-if="distributionform.distributionData.notebook">
            <img src="./../../../assets/images/notebook_icon.png" />
        </div>
      </div>
      <!-- 修改 -->
      <div v-if="rowId" slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="editQuestion(function(){DistributionFormSave(1)},'distributionform')">保 存</el-button>
        <el-button class="button-style" @click="editQuestion(function(){DistributionFormSave(2)},'distributionform')">保存并进入环境</el-button>
      </div>
      <!-- 新增 -->
      <div v-else slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="addQuestion(function(){DistributionFormSave(1)},'distributionform')">保 存</el-button>
        <el-button class="button-style" @click="addQuestion(function(){DistributionFormSave(2)},'distributionform')">保存并进入环境</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import mavonEditor from "../../../components/mavonEditor";
import axios from "axios";
import $ from "jquery";
export default {
  components: { mavonEditor },
  data() {
    return {
      distributionFormSaveData: [],
      //是否是创作课程页面下
      isCreativeCourse: true,
      //取searchForm
      itemBankSearchForm: this.$localstorage.getLocalStorage("searchForm"),
      //取itemBankName
      itemBankName: this.$localstorage.getLocalStorage("itemBankName"),
      questionTypeMessage: "实验题",
      //试题id
      questionId: "",
      //题目类型数组
      questionTypeList: [],
      //章节数组
      chapterList: [],
      //锁定题型
      disabledQuestionType: false,
      addForm: {
        //章节ID
        chapterId: "",
        //题目类型
        questionType: 6,
        //问题描述，题干
        content: "",
        htmlContent: "",
        //备选答案
        answer: [
          {
            content: "",
            htmlContent: ""
          }
        ]
        //查重百分比
        //duplicatePercent:50
      },
      judgeRadio: "1",
      value: "",
      questionRenders: "",
      //编辑实验环境弹出框
      dialogEditExperimental: false,
      //查重设置弹出框
      dialogCheck: false,
      editExperimental: {
        radio: "1"
      },
      //查重设置开关
      dialogCheckSwitch: true,
      //查重设置option
      dialogCheckOption: [
        {
          value: "选项1",
          label: "70"
        },
        {
          value: "选项2",
          label: "80"
        },
        {
          value: "选项3",
          label: "90"
        }
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      rowId: "",
      //分配镜像弹窗
      dialogDistributionFormVisible: false,
      distributionform: {
        // 类型
        resource: 1,
        // 实验类型 1 可视化实验 2 notebook实验
        experimentType:1,
        // 伪分布数组
        distributedData: {
          // cpu配置
          cpuOptions: [
            {
              value: "1",
              label: "1核"
            },
            {
              value: "2",
              label: "2核"
            },
            {
              value: "4",
              label: "4核"
            },
            {
              value: "6",
              label: "6核"
            },
            {
              value: "8",
              label: "8核"
            },
            {
              value: "10",
              label: "10核"
            }
          ],
          cpuValue: "",
          ramOptions: [
            {
              value: "1",
              label: "1G"
            },
            {
              value: "2",
              label: "2G"
            },
            {
              value: "4",
              label: "4G"
            },
            {
              value: "6",
              label: "6G"
            },
            {
              value: "8",
              label: "8G"
            },
            {
              value: "10",
              label: "10G"
            },
            {
              value: "12",
              label: "12G"
            },
            {
              value: "14",
              label: "14G"
            },
            {
              value: "16",
              label: "16G"
            },
            {
              value: "32",
              label: "32G"
            },
            {
              value: "48",
              label: "48G"
            },
            {
              value: "64",
              label: "64G"
            }
          ],
          ramValue: "",
          // GPU
        //   switchValue: false
        },
        // 镜像配置
        mirrorConfigData: {
          // cpu配置
          cpuOptions: [
            {
              value: "1",
              label: "1核"
            },
            {
              value: "2",
              label: "2核"
            },
            {
              value: "4",
              label: "4核"
            },
            {
              value: "6",
              label: "6核"
            },
            {
              value: "8",
              label: "8核"
            },
            {
              value: "10",
              label: "10核"
            }
          ],
          cpuValue: "",
          ramOptions: [
            {
              value: "1",
              label: "1G"
            },
            {
              value: "2",
              label: "2G"
            },
            {
              value: "4",
              label: "4G"
            },
            {
              value: "6",
              label: "6G"
            },
            {
              value: "8",
              label: "8G"
            },
            {
              value: "10",
              label: "10G"
            },
            {
              value: "12",
              label: "12G"
            },
            {
              value: "14",
              label: "14G"
            },
            {
              value: "16",
              label: "16G"
            },
            {
              value: "32",
              label: "32G"
            },
            {
              value: "48",
              label: "48G"
            },
            {
              value: "64",
              label: "64G"
            }
          ],
          ramValue: "",
          // GPU
          switchValue: false
        },
        // 主节点
        nodeMianData: {
          // cpu配置
          cpuOptions: [
            {
              value: "1",
              label: "1核"
            },
            {
              value: "2",
              label: "2核"
            },
            {
              value: "4",
              label: "4核"
            },
            {
              value: "6",
              label: "6核"
            },
            {
              value: "8",
              label: "8核"
            },
            {
              value: "10",
              label: "10核"
            }
          ],
          cpuValue: "",
          ramOptions: [
            {
              value: "1",
              label: "1G"
            },
            {
              value: "2",
              label: "2G"
            },
            {
              value: "4",
              label: "4G"
            },
            {
              value: "6",
              label: "6G"
            },
            {
              value: "8",
              label: "8G"
            },
            {
              value: "10",
              label: "10G"
            },
            {
              value: "12",
              label: "12G"
            },
            {
              value: "14",
              label: "14G"
            },
            {
              value: "16",
              label: "16G"
            },
            {
              value: "32",
              label: "32G"
            },
            {
              value: "48",
              label: "48G"
            },
            {
              value: "64",
              label: "64G"
            }
          ],
          ramValue: "",
          // GPU
          switchValue: false
        },
        options0: [],
        optionsValue0: [],
        options1: [],
        optionsValue1: [],
        options2: [],
        optionsValue2: [],
        options3: [],
        optionsValue3: [],
        options4: [],
        optionsValue4: [],
        options5: [],
        optionsValue5: [],
        options6: [],
        optionsValue6: [],
        options7: [],
        optionsValue7: [],
        virtualStepList: [{ value: 1 }, { value: 2 }],
        virtualStepCurrent: 1,
        // 镜像列表数据
        distributionData: "",
        currentPath: ""
      }
    };
  },
  created() {
    //验证页面是不是创建课程的页面
    let currentPath = this.$router.history.current.path;
    if (currentPath.match("CreativeCourse")) {
      this.isCreativeCourse = true;
    } else {
      this.isCreativeCourse = false;
    }
    this.currentPath = currentPath;
    //CreativeCourse
    console.log(this.currentPath, 66666);
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getTopicSelected();
      this.getRowData();
      this.reGetChapter();
    },
    //修改只保存试题
    toItemList() {
      let that = this;
      let rowId = that.rowId;
      let isNull = that.reQuestion();
      if (!isNull) {
        return;
      }
      //放这
      const loading = that.$loading({
        lock: true,
        text: "正在保存中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      axios
        .put(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/businessType/1/question-repository/question/" +
            rowId,
          that.addForm
        )
        .then(function(res) {
          //   console.log("成功1");
          //   console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              console.log(1111111);
              that.$message({
                message: "修改成功",
                type: "success"
              });
              loading.close();
              window.localStorage.setItem("questionId", rowId);
              console.log(22222222);
              that.$router.push({
                name: that.itemBankName,
                params: { searchForm: that.itemBankSearchForm }
              });
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    reGetChapter() {
      let self = this;
      self.$http
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/chapter/list/owner"
        )
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            self.$nextTick(() => {
              self.tableData = res.data;
            });
            //已经有章节,判断导航显示
            self.$parent.mark = false;
            self.$parent.chaperFlag = false;
          } else if (res.code == "404") {
            self.tableData = "";
            //暂无章节,判断导航显隐藏
            this.$parent.mark = true;
            this.$parent.chaperFlag = false;
          }
        })
        .catch(err => {
          self.$message.error(res.message);
        });
    },
    addQuestionShowDialog() {
      let that = this;
      let isNull = that.reQuestion();
      if (isNull) {
        that.Distribution();
      }
    },
    //提交验证
    reQuestion() {
      let that = this;
      let addForm = that.addForm;
      //添加问题
      that.addForm.content = that.$refs["question"].value;
      that.addForm.htmlContent = that.$refs.question.getRender();
      //添加答案
      that.addForm.answer[0].content = that.$refs["answer"].value;
      that.addForm.answer[0].htmlContent = that.$refs.answer.getRender();
      //   console.log(addForm);
      if (!addForm.chapterId) {
        that.$message.warning("请选择试题章节");
        return false;
      }
      if (addForm.content.match(/^\s*$/)) {
        that.$message.warning("请填写题干");
        return false;
      }
      if (addForm.answer[0].content.match(/^\s*$/)) {
        that.$message.warning("请填写答案内容");
        return false;
      }
      return true;
    },
    //添加试题
    addQuestion(fn, formName) {
      var that = this;
      console.log(that.$route);
      //return;
      let isNull = that.reQuestion();
      if (!isNull) {
        return;
      }
      // tag标记1.保存 2.保存并跳转实验镜像
      let self = this;
      self.$refs[formName].validate(valid => {
        if (valid) {
          let data = {},
            slaveImageIdsArr = [];
          // data.chapterIds = self.multipleSelection
          data.mode = self.distributionform.resource;
            data.experimentType = self.distributionform.experimentType
          if (self.distributionform.resource == 1) {
            data.imageId = self.distributionform.optionsValue0[1]
              ? self.distributionform.optionsValue0[1]
              : "";
            data.cpu = self.distributionform.distributedData.cpuValue;
            data.ram = self.distributionform.distributedData.ramValue;
            // data.gpu = self.distributionform.distributedData.switchValue;

            if (data.imageId == "") {
              self.$message.error("请选择镜像");
              return;
            }
            self.distributionFormSaveData = data;
          } else if (self.distributionform.resource == 2) {
            data.imageId = self.distributionform.optionsValue7[1]
              ? self.distributionform.optionsValue7[1]
              : "";
            data.cpu = self.distributionform.nodeMianData.cpuValue;
            data.ram = self.distributionform.nodeMianData.ramValue;
            data.gpu = self.distributionform.nodeMianData.switchValue;
            data.slaveCpu = self.distributionform.mirrorConfigData.cpuValue;
            data.slaveRam = self.distributionform.mirrorConfigData.ramValue;
            data.slaveGpu = self.distributionform.mirrorConfigData.switchValue;

            if (data.imageId == "") {
              self.$message.error("请选择主节点镜像");
              return;
            }

            if (self.distributionform.virtualStepCurrent == 1) {
                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                if (self.distributionform.optionsValue1[1] == undefined) {
                    self.$message.error('请选择从节点1镜像')
                    return
                }
            }else if (self.distributionform.virtualStepCurrent == 2) {
              slaveImageIdsArr.push(self.distributionform.optionsValue1[1]);
              if (self.distributionform.optionsValue1[1] == undefined) {
                self.$message.error("请选择从节点1镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue2[1]);
              if (self.distributionform.optionsValue2[1] == undefined) {
                self.$message.error("请选择从节点2镜像");
                return;
              }
            } else if (self.distributionform.virtualStepCurrent == 4) {
              slaveImageIdsArr.push(self.distributionform.optionsValue1[1]);
              if (self.distributionform.optionsValue1[1] == undefined) {
                self.$message.error("请选择从节点1镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue2[1]);
              if (self.distributionform.optionsValue2[1] == undefined) {
                self.$message.error("请选择从节点2镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue3[1]);
              if (self.distributionform.optionsValue3[1] == undefined) {
                self.$message.error("请选择从节点3镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue4[1]);
              if (self.distributionform.optionsValue4[1] == undefined) {
                self.$message.error("请选择从节点4镜像");
                return;
              }
            } else if (self.distributionform.virtualStepCurrent == 6) {
              slaveImageIdsArr.push(self.distributionform.optionsValue1[1]);
              if (self.distributionform.optionsValue1[1] == undefined) {
                self.$message.error("请选择从节点1镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue2[1]);
              if (self.distributionform.optionsValue2[1] == undefined) {
                self.$message.error("请选择从节点2镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue3[1]);
              if (self.distributionform.optionsValue3[1] == undefined) {
                self.$message.error("请选择从节点3镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue4[1]);
              if (self.distributionform.optionsValue4[1] == undefined) {
                self.$message.error("请选择从节点4镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue5[1]);
              if (self.distributionform.optionsValue5[1] == undefined) {
                self.$message.error("请选择从节点5镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue6[1]);
              if (self.distributionform.optionsValue6[1] == undefined) {
                self.$message.error("请选择从节点6镜像");
                return;
              }
            }
            data.slaveImageIds = slaveImageIdsArr;
            self.distributionFormSaveData = data;
          }

          //放这
          const loading = that.$loading({
            lock: true,
            text: "正在保存中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          axios
            .post(
              "/tes/course/" +
                this.$localstorage.getLocalStorage("setCourseId") +
                "/businessType/1/question-repository/question",
              that.addForm
            )
            .then(function(res) {
              loading.close();
              console.log("成功1");
              console.log(res);
              if (res.status === 200) {
                if (res.data.code === 200) {
                  //   that.$message({
                  //     message: "添加成功",
                  //     type: "success"
                  //   });
                  that.questionId = res.data.data;
                  window.localStorage.setItem("questionId", that.questionId);
                  fn();
                } else {
                  that.$message({
                    message: res.data.message,
                    type: "error"
                  });
                }
              }
            })
            .catch(function(err) {
              if (err.response) {
                console.log(err.response);
              }
            });
        }
      });
    },
    //通过id获取题目信息
    getRowData() {
      var that = this;
      let rowId = that.$route.query.rowId;
      that.rowId = rowId;
      if (!rowId) {
        return;
      }
      that.disabledQuestionType = true;
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/businessType/1/question-repository/question/" +
            rowId
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.addForm = res.data.data;
              that.setEditDom();
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //回填
    setEditDom() {
      let that = this;
      let addForm = that.addForm;
      that.$refs.question.changeVal(addForm.content);
      that.$refs.answer.changeVal(addForm.answer[0].content);
    },
    //修改试题
    editQuestion(fn, formName) {
      var that = this;
      let rowId = that.rowId;
      let isNull = that.reQuestion();
      if (!isNull) {
        return;
      }
      // tag标记1.保存 2.保存并跳转实验镜像
      let self = this;
      self.$refs[formName].validate(valid => {
        if (valid) {
          let data = {},
            slaveImageIdsArr = [];
          // data.chapterIds = self.multipleSelection
          data.mode = self.distributionform.resource;
            data.experimentType = self.distributionform.experimentType
          if (self.distributionform.resource == 1) {
            data.imageId = self.distributionform.optionsValue0[1]
              ? self.distributionform.optionsValue0[1]
              : "";
            data.cpu = self.distributionform.distributedData.cpuValue;
            data.ram = self.distributionform.distributedData.ramValue;
            // data.gpu = self.distributionform.distributedData.switchValue;

            if (data.imageId == "") {
              self.$message.error("请选择镜像");
              return;
            }
            self.distributionFormSaveData = data;
          } else if (self.distributionform.resource == 2) {
            data.imageId = self.distributionform.optionsValue7[1]
              ? self.distributionform.optionsValue7[1]
              : "";
            data.cpu = self.distributionform.nodeMianData.cpuValue;
            data.ram = self.distributionform.nodeMianData.ramValue;
            data.gpu = self.distributionform.nodeMianData.switchValue;
            data.slaveCpu = self.distributionform.mirrorConfigData.cpuValue;
            data.slaveRam = self.distributionform.mirrorConfigData.ramValue;
            data.slaveGpu = self.distributionform.mirrorConfigData.switchValue;

            if (data.imageId == "") {
              self.$message.error("请选择主节点镜像");
              return;
            }

            if (self.distributionform.virtualStepCurrent == 1) {
                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                if (self.distributionform.optionsValue1[1] == undefined) {
                    self.$message.error('请选择从节点1镜像')
                    return
                }
            }else if (self.distributionform.virtualStepCurrent == 2) {
              slaveImageIdsArr.push(self.distributionform.optionsValue1[1]);
              if (self.distributionform.optionsValue1[1] == undefined) {
                self.$message.error("请选择从节点1镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue2[1]);
              if (self.distributionform.optionsValue2[1] == undefined) {
                self.$message.error("请选择从节点2镜像");
                return;
              }
            } else if (self.distributionform.virtualStepCurrent == 4) {
              slaveImageIdsArr.push(self.distributionform.optionsValue1[1]);
              if (self.distributionform.optionsValue1[1] == undefined) {
                self.$message.error("请选择从节点1镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue2[1]);
              if (self.distributionform.optionsValue2[1] == undefined) {
                self.$message.error("请选择从节点2镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue3[1]);
              if (self.distributionform.optionsValue3[1] == undefined) {
                self.$message.error("请选择从节点3镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue4[1]);
              if (self.distributionform.optionsValue4[1] == undefined) {
                self.$message.error("请选择从节点4镜像");
                return;
              }
            } else if (self.distributionform.virtualStepCurrent == 6) {
              slaveImageIdsArr.push(self.distributionform.optionsValue1[1]);
              if (self.distributionform.optionsValue1[1] == undefined) {
                self.$message.error("请选择从节点1镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue2[1]);
              if (self.distributionform.optionsValue2[1] == undefined) {
                self.$message.error("请选择从节点2镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue3[1]);
              if (self.distributionform.optionsValue3[1] == undefined) {
                self.$message.error("请选择从节点3镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue4[1]);
              if (self.distributionform.optionsValue4[1] == undefined) {
                self.$message.error("请选择从节点4镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue5[1]);
              if (self.distributionform.optionsValue5[1] == undefined) {
                self.$message.error("请选择从节点5镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue6[1]);
              if (self.distributionform.optionsValue6[1] == undefined) {
                self.$message.error("请选择从节点6镜像");
                return;
              }
            }
            data.slaveImageIds = slaveImageIdsArr;
            self.distributionFormSaveData = data;
          }

          //放这
          const loading = that.$loading({
            lock: true,
            text: "正在保存中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          axios
            .put(
              "/tes/course/" +
                this.$localstorage.getLocalStorage("setCourseId") +
                "/businessType/1/question-repository/question/" +
                rowId,
              that.addForm
            )
            .then(function(res) {
              //   console.log("成功1");
              //   console.log(res);
              if (res.status === 200) {
                if (res.data.code === 200) {
                  console.log(1111111);
                  that.$message({
                    message: "修改成功",
                    type: "success"
                  });
                  loading.close();
                  window.localStorage.setItem("questionId", rowId);
                  fn();
                } else {
                  that.$message({
                    message: res.data.message,
                    type: "error"
                  });
                }
              }
            })
            .catch(function(err) {
              if (err.response) {
                console.log(err.response);
              }
            });
        }
      });
    },
    //获取题目类型和章节下拉
    getTopicSelected() {
      var that = this;
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/businessType/1/question-repository/dropdown-list"
        )
        .then(function(res) {
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              console.log(res.message);
              //赋值题目类型
              let questionTypeList = res.data.data.questionTypeList;
              that.questionTypeList = questionTypeList;
              //赋值章节列表
              let chapterList = res.data.data.chapterList;
              that.chapterList = chapterList;
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //获取题目类型
    getTopicModel(val) {
      this.addForm.questionType = val;
      switch (val) {
        case 1:
          this.$router.push({
            path: "addChoiceQuestion"
          });
          break;
        case 2:
          this.$router.push({
            path: "addJudge"
          });
          break;
        case 3:
          this.$router.push({
            path: "addFillInTheBlanks"
          });
          break;
        case 4:
          this.$router.push({
            path: "AddShortAnswerQuestions"
          });
          break;
        case 5:
          this.$router.push({
            path: "addJudge"
          });
          break;
        case 6:
          this.$router.push({
            path: "addExperimental"
          });
          break;
        default:
          console.log(1234);
      }
    },
    //获取章节
    getchapterModel(val) {
      //   console.log(123123);
      this.addForm.chapterId = val;
    },
    //查重弹出关闭
    dialogCheckClose() {},
    //查重弹出确定
    dialogCheckSubmit() {},
    //编辑实验环境弹出关闭
    dialogEditExperimentalClose() {},
    //编辑实验环境弹出确定
    dialogEditExperimentalSubmit() {},
    //弹窗step切换
    AddClass(index) {
      let self = this;
    //   if(index != 2){
    //         return
    //     }
      self.distributionform.virtualStepCurrent = index;
    },
    // 查询NoteBook镜像列表
    getImageList(is_notebook) {
            this.$http.get('/tes/image-allocation/image?cluster=false&notebook='+is_notebook ).then(response => {
            let res = response.data
            if(res.code == '200'){
                this.distributionform.options0 = res.data
            }else{
                this.$message.error(res.message)
            }
        }).catch(err => {
            console.log(err)
        })
    },
    // 选择实验类型
    experimentTypeChange(e) {
        this.distributionform.resource = 1
        this.distributionform.distributedData.cpuValue = ''
        this.distributionform.distributedData.ramValue = ''
        // this.distributionform.distributedData.switchValue = false
        this.distributionform.mirrorConfigData.cpuValue = ''
        this.distributionform.mirrorConfigData.ramValue = ''
        this.distributionform.mirrorConfigData.switchValue = false
        this.distributionform.nodeMianData.cpuValue = ''
        this.distributionform.nodeMianData.ramValue = ''
        this.distributionform.optionsValue0 = [];
        this.distributionform.optionsValue1 = [];
        this.distributionform.optionsValue2 = [];
        this.distributionform.optionsValue3 = [];
        this.distributionform.optionsValue4 = [];
        this.distributionform.optionsValue5 = [];
        this.distributionform.optionsValue6 = [];
        this.distributionform.optionsValue7 = [];
        this.distributionform.virtualStepCurrent = 1;
        this.distributionform.distributionData = '';
        let type = e==1 ? false : true;
        this.getImageList(type);
    },
    // 分配镜像
    Distribution() {
      let self = this;
    //   self.distributionform.resource = 1
    //   let cluster = self.distributionform.resource == 1 ? false : true
        self.getImageList(false);
        self.$http
        .get("/tes/image-allocation/image?cluster=true&notebook=false")
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            self.distributionform.options1 = res.data;
            self.distributionform.options2 = res.data;
            self.distributionform.options3 = res.data;
            self.distributionform.options4 = res.data;
            self.distributionform.options5 = res.data;
            self.distributionform.options6 = res.data;
            self.distributionform.options7 = res.data;

          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
      // 显示分配镜像弹窗
       self.dialogDistributionFormVisible = true;
      if (self.rowId) {
        self.$http
          .get("/tes/image-allocation/question/" + self.rowId)
          .then(response => {
            let res = response.data;
            if (res.code == "200") {
              if (res.data.allocated) {
                self.distributionform.experimentType = res.data.type;
                //获取可视化实验单节点/notebook实验镜像列表
                if (res.data.type == 2) {
                    self.getImageList(true);
                }
                if (res.data.mode == 1) {
                  self.distributionform.resource = res.data.mode;
                  // 伪分布取值
                  self.distributionform.distributedData.cpuValue =
                    "" + res.data.cpu + "";
                  self.distributionform.distributedData.ramValue =
                    "" + res.data.ram + "";
                //   self.distributionform.distributedData.switchValue =
                //     res.data.gpu;

                  self.distributionform.optionsValue0 = [
                    res.data.image.imageSource,
                    res.data.image.imageId
                  ];
                } else if (res.data.mode == 2) {
                  self.distributionform.resource = res.data.mode;
                  // 主节点取值
                  self.distributionform.nodeMianData.cpuValue =
                    "" + res.data.cpu + "";
                  self.distributionform.nodeMianData.ramValue =
                    "" + res.data.ram + "";
                  self.distributionform.nodeMianData.switchValue = res.data.gpu;

                  self.distributionform.optionsValue7 = [
                    res.data.image.imageSource,
                    res.data.image.imageId
                  ];
                  // 从节点镜像配置
                  self.distributionform.mirrorConfigData.cpuValue =
                    "" + res.data.slaveCpu + "";
                  self.distributionform.mirrorConfigData.ramValue =
                    "" + res.data.slaveRam + "";
                  self.distributionform.mirrorConfigData.switchValue =
                    res.data.slaveGpu;
                  self.distributionform.virtualStepCurrent = res.data.slaveSize;
                  self.$nextTick(() => {
                    if(res.data.slaveSize == 1){
                        self.distributionform.optionsValue1 = [res.data.slaveImages[0].imageSource, res.data.slaveImages[0].imageId]
                    }else if (res.data.slaveSize == 2) {
                      self.distributionform.optionsValue1 = [
                        res.data.slaveImages[0].imageSource,
                        res.data.slaveImages[0].imageId
                      ];
                      self.distributionform.optionsValue2 = [
                        res.data.slaveImages[1].imageSource,
                        res.data.slaveImages[1].imageId
                      ];
                    } else if (res.data.slaveSize == 4) {
                      self.distributionform.optionsValue1 = [
                        res.data.slaveImages[0].imageSource,
                        res.data.slaveImages[0].imageId
                      ];
                      self.distributionform.optionsValue2 = [
                        res.data.slaveImages[1].imageSource,
                        res.data.slaveImages[1].imageId
                      ];
                      self.distributionform.optionsValue3 = [
                        res.data.slaveImages[2].imageSource,
                        res.data.slaveImages[2].imageId
                      ];
                      self.distributionform.optionsValue4 = [
                        res.data.slaveImages[3].imageSource,
                        res.data.slaveImages[3].imageId
                      ];
                    } else if (res.data.slaveSize == 6) {
                      self.distributionform.optionsValue1 = [
                        res.data.slaveImages[0].imageSource,
                        res.data.slaveImages[0].imageId
                      ];
                      self.distributionform.optionsValue2 = [
                        res.data.slaveImages[1].imageSource,
                        res.data.slaveImages[1].imageId
                      ];
                      self.distributionform.optionsValue3 = [
                        res.data.slaveImages[2].imageSource,
                        res.data.slaveImages[2].imageId
                      ];
                      self.distributionform.optionsValue4 = [
                        res.data.slaveImages[3].imageSource,
                        res.data.slaveImages[3].imageId
                      ];
                      self.distributionform.optionsValue5 = [
                        res.data.slaveImages[4].imageSource,
                        res.data.slaveImages[4].imageId
                      ];
                      self.distributionform.optionsValue6 = [
                        res.data.slaveImages[5].imageSource,
                        res.data.slaveImages[5].imageId
                      ];
                    }
                  });
                }
              }
            } else {
              self.$message.error(res.message);
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    // 表单提交
    DistributionFormSave(tag) {
      let self = this;
      // 添加试题ID self.addForm.chapterId
      let questionId = self.$localstorage.getLocalStorage("questionId");
      let data = self.distributionFormSaveData;
      console.log(data);
      self.$http
        .post("/tes/image-allocation/question/" + questionId, data)
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            console.log(333);
            if (tag == 1) {
              self.$message({
                message: "镜像分配成功",
                type: "success"
              });
              // 镜像分配弹窗隐藏
              self.dialogDistributionFormVisible = false;

              self.$router.push({
                name: self.itemBankName,
                params: {
                  searchForm: self.itemBankSearchForm
                }
              });
            } else {
              self.$router.push({
                path: "/Teaching/MyCourses/ExaminationVirtualMachine"
              });
            }
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleItemChange(data) {
      let self = this;
      if (data[1]) {
        self.$http
          .get("/tes/image-allocation/image/" + data[1])
          .then(response => {
            let res = response.data;
            if (res.code == "200") {
              self.distributionform.distributionData = res.data;
            } else {
              self.$message.error(res.message);
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  }
};
</script>

<style lang="scss">
@import "./../../../styles/layout/color_variables";
#add-experimental {
  .fullscreen {
    top: 60px;
    z-index: 99999;
  }
  // 分配镜像弹窗样式
  .dialog-distribution {
    .el-dialog {
      min-height: 460px;
    }
    .el-form {
      padding: 0 50px;
      .el-dialog__body {
        position: relative;
      }
      .el-form-item__label {
        width: 95px;
      }
      .el-select {
        .el-input__inner {
          width: 80px;
        }
      }
      .el-input__icon {
        line-height: 32px;
      }
      .miror-item {
        .el-form-item {
          width: 305px;
          .el-select {
            margin-right: 5px;
            .el-input__inner {
              width: 150px;
            }
          }
        }
      }
      .config-item {
        .item-config {
          width: 340px;
          .el-select {
            .el-input__inner {
              width: 110px;
            }
          }
        }
        .item-cpu {
          .el-form-item__error {
            left: 95px;
          }
        }
        .el-form-item {
          width: 305px;
          .el-select {
            margin-right: 5px;
          }
          &.item-distributed {
            width: 270px;
            .el-select {
              .el-input__inner {
                width: 180px;
              }
            }
            .el-form-item__error {
              left: 85px;
            }
          }
          &.item-Gpu {
            width: 100px;
            .el-form-item__label {
              width: 55px;
            }
          }
        }
      }
      .form-title {
        font-size: 16px;
        color: #385899;
        width: 85px;
        margin-bottom: 15px;
        text-align: center;
      }
      .el-select {
        .el-input__inner {
          width: 180px;
        }
      }
      .el-cascader {
        line-height: 32px;
      }
      .item-node {
        .el-form-item {
          display: inline-block;
          width: 330px;
        }
      }
    }
    .el-dialog__footer {
      text-align: center;
    }
    .button-style {
      min-width: 90px;
    }
    .el-radio-group {
      .el-radio__inner {
        border-color: #dcdfe6;
      }
      .el-radio {
        width: 80px;
      }
    }
    .virtual-step {
      width: 288px;
      border-bottom: solid 3px #dfdfdf;
      margin-top: 15px;
      margin-left: 80px;
      ul {
        li {
          float: left;
          width: 19px;
          height: 19px;
          line-height: 19px;
          color: #fff;
          font-size: 12px;
          text-align: center;
          border-radius: 10px;
          margin: -9px 0 0 0;
          background: #d9d9d9;
          cursor: pointer;
          &.active-disabled{
            cursor:not-allowed;
        }
          &:first-child {
            margin-left: 10%;
          }
          &:nth-child(2) {
            margin-left: 29%;
          }
          &:last-child {
            margin-left: 31%;
          }
          &.active {
            background: #1277eb;
          }
        }
      }
    }
    .distribution-item {
      width: 208px;
      height: 280px;
      border: solid 1px #e8e8e8;
      border-radius: 4px;
      position: absolute;
      right: 55px;
      top: 95px;
      .jx-course-box {
        margin-top: 25px;
        text-align: center;
        img {
          width: 155px;
        }
        span {
          display: block;
          font-size: 14px;
          color: $title-gray;
          margin-top: 10px;
        }
      }
      .jx-course-icon{
            position: absolute;
            right: 18px;
            top: -5px;
        }
      .jx-course-text {
        margin: 10px 24px 0;
        height: 145px;
        overflow-y: scroll;
        font-size: 12px;
        line-height: 16px;
        color: $table-gray;
        word-wrap: break-word;
        &::-webkit-scrollbar {
          width: 2px;
        }

        &::-webkit-scrollbar-thumb {
          background: #6c6c6c;
        }
      }
    }
  }
  // .el-cascader-menu{
  //     height: auto;
  // }
}
</style>

<style lang="scss">
@import "./../../../styles/layout/color_variables";

body {
  background: $bg-gray;
}
#add-experimental.isCreativeCourse {
  margin: 20px auto 30px;
}
#add-experimental {
  //编辑器设置z-index
  @for $i from 1 through 15 {
    //$item: nth($stars, $i);
    .question-choice {
      &:nth-child(#{$i}) {
        .v-note-wrapper.markdown-body {
          position: relative;
          z-index: 16-$i;
        }
      }
    }
  }
  .courses-nav.jx-content {
    margin-bottom: 0;
  }
  .jx-content {
    position: relative;
    z-index: 1;
  }
  width: $width;
  margin: 0px auto 30px;
  color: #727272;
  .edit-experimental {
    width: 98px;
    height: 98px;
    position: fixed;
    right: 90px;
    bottom: 120px;
    color: #fff;
    text-align: center;
    line-height: 130px;
    font-size: 14px;
    cursor: pointer;
    background: url("../../../assets/images/virtual_link.png") no-repeat;
    z-index: 10;
    &:hover{
          transform: rotate(360deg);
          transition: .5s;
      }
  }
  .dialog-check {
    p {
      line-height: 60px;
      text-align: center;
    }
    .check-tishi {
      i {
        padding: 0 10px;
        font-size: 20px;
        color: $btn-blue;
      }
    }
    .dialog-b {
      margin-left: -27px;
    }
    .el-dialog__footer {
      text-align: center;
    }
    .el-select .el-input__inner {
      width: 80px;
    }
  }
  .demo-form-inline {
    .button-style {
      margin-top: 4px;
    }
  }
  //保存提交
  .question-submit {
    margin-left: -111px;
  }
  //编辑器
  .v-note-wrapper {
    min-height: 150px;
  }
  .form-group {
  }
  .btn-group {
    text-align: center;
    margin-top: 40px;
  }
  .answer-editor {
    margin-bottom: 60px;
    .v-note-wrapper {
      min-height: 150px;
    }
  }
  .question-editor {
    .jx-title {
      display: flex;
      justify-content: space-between;
    }
  }
  .question-choice {
    display: flex;
    margin-bottom: 40px;
    .question-left {
      color: #727272;
      min-width: 30px;
    }
    .question-center {
      width: 100%;
    }
    .question-right {
      min-width: 140px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .question-del {
        width: 20px;
        height: 20px;
        padding: 0;
        font-size: 24px;
        border-radius: 20px;
        color: $title-gray;
        border: 1px solid $title-gray;
        text-align: center;
        line-height: 6px;
        cursor: pointer;
        &:hover {
          color: #1277eb;
          border: 1px solid #1277eb;
        }
      }
      .question-del.is-disabled {
        &:hover {
          color: #c0c4cc;
          cursor: not-allowed;
          background-image: none;
          background-color: #fff;
          border-color: #ebeef5;
        }
      }
      .question-label {
        .chose-del {
          color: #727272;
          margin-right: 10px;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
